<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>画板</title>
		<style>
			*{
				margin: 0;
				padding: 0;
		        box-sizing: border-box;
			}
			#big{
				width: 1500px;
				height: 700px;
				position: relative;
			}
			#menu{
				width: 1500px;
				height: 50px;
				border: 1px solid #A4A4A4;
			}
			div[class^='btn']{
				width: 90px;
				height: 30px;
				line-height: 30px;
				font-size: 16px;
				border: 1px solid #BDBDBD;
				text-align: center;
				float: left;
			    border-radius: 10px;
				margin: 10px;
				cursor: pointer;
				color: #848484
			}
			.active{
			    box-shadow: 0 0 10px deepskyblue;
			}
			.btn:first-child{
				background: url(./img/pen.png) no-repeat center;
				/* background-position: center; */
				background-size: auto 100%;
			}
	        #canvas{
				width: 100%;
				height: 100%;
				border: 1px solid #A4A4A4;
				cursor: crosshair;
			}
			#canvas2{
				width: 100%;
				height: 100%;
				border: 1px solid #A4A4A4;
			}
			a{
				text-decoration: none;
				color: #848484
			}
			#color{
				width: 100%;
				height: 100%;
				border-radius: 10px;
				outline: none;
				cursor: pointer;
			}
/* 生成图片			 */
			#small{
				width: 500px;
				background-color: white;
				border: 1px solid red;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				display: none;
			}
/* 画笔粗细			 */
		.btn1{
			display: flex;
			justify-content: center;
			align-items: center;
		}
        .xi:after{
			content: '';
			background-color: #333;
			width: 5px;
			height: 5px;
			border-radius: 50%;
			display: block;
		} 
		.normal:after{
			content: '';
			background-color: #333;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			display: block;
		} 
		.cu:after{
			content: '';
			background-color: #333;
			width: 25px;
			height: 25px;
			border-radius: 50%;
			display: block;
		} 
		#zz{
			width: 100%;
			height: 100vh;
			position: absolute;
			top:0;
			left:0;
			background-color: rgba(0,0,0,.5);
			display: none;
		}
		</style>
	</head>
	<body>
		<div id='big'>
			<div id='menu'>
				<div class='btn active'></div>
				<div class='btn'>矩形</div>
				<div class='btn'>
					<input type="color" id="color"/>
				</div>
				<div class='btn'>
					<a href="" id='a1' download="download">直接下载</a>
				</div>
				<div class='btn'>点图下载</div>
				<div class='btn1 xi active'></div>
				<div class='btn1 normal'></div>
				<div class='btn1 cu'></div>
			</div>
			<canvas id="canvas" width="1500" height="700"></canvas>
		</div>
		<div id='zz'>
			
		</div>
		<div id='small'>
			<canvas id="canvas2" width="750" height="350"></canvas>
			<button>
				<a href="" id='a2' download="download">下载此图</a>
			</button>
		</div>
		<script>
			var canvas = document.getElementById('canvas');
			var btns = document.querySelectorAll('.btn');
			var c = canvas.getContext('2d');
			var huaban = {
				type:'huabi',
				isDraw:false,
				beginX:0,
				beginY:0,
				lineWidth:3,
				imageData:null,
				color:'#000',
				huabiFn:function(e){
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					c.lineTo(x,y)
					c.strokeStyle = huaban.color
					c.lineWidth = huaban.lineWidth
					c.lineCap = 'round'
					c.lineJoin = 'round'
					c.stroke()		
				},
	            rectFn:function(e){
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					c.clearRect(0,0,canvas.offsetWidth,canvas.offsetHeight)
					if(huaban.imageData != null){
						c.putImageData(huaban.imageData,0,0,0,0,canvas.offsetWidth,canvas.offsetHeight)
					}
					c.beginPath()
					c.strokeStyle = huaban.color
					c.rect(huaban.beginX,huaban.beginY,x-huaban.beginX,y-huaban.beginY)
					c.stroke()
					c.closePath()
				}
			}
			
			btns[0].onclick = function(){
				btns.forEach(function(item, i){
					item.classList.remove('active')
				})
				this.classList.add('active');
				huaban.type = 'huabi'
			}
			btns[1].onclick = function(){
				btns.forEach(function(item, i){
					item.classList.remove('active')
				})
				this.classList.add('active');
				huaban.type = 'rect'
			}
			btns[3].onclick = function(){
				var url = canvas.toDataURL();
				// console.log(url);
				var adom1 = document.querySelector('#a1');
				adom1.setAttribute('href',url);
				// 自动触发点击事件
				// adom1.click()
			}
			var canvas2 = document.getElementById('canvas2');
			var c2 = canvas2.getContext('2d');
			var s = document.getElementById('small');
			var zz = document.getElementById('zz');
			btns[4].onclick = function(){
				c2.drawImage(canvas,0,0,750,345);
				s.style.display = 'block';
				zz.style.display = 'block';
				var url = canvas.toDataURL();
				var adom2 = document.querySelector('#a2');
				adom2.setAttribute('href',url);
			}
			zz.onclick = function(){
				s.style.display = 'none';
				zz.style.display = 'none';
			}
		    // 监听颜色设置改变事件
			var colorInput = document.getElementById('color');
			colorInput.onchange = function(e){
				console.log(colorInput.value)
				huaban.color = colorInput.value
			}
			
			// 设置粗细的按钮
			var lines = document.querySelectorAll('.btn1');
			lines.forEach(function(item, i){
				item.onclick = function(){
					lines.forEach(function(a,b){
						a.classList.remove('active')
					})
					item.classList.add('active')
					if(i == 0){
						huaban.lineWidth = 3
					}else if(i == 1){
						huaban.lineWidth = 16
					}else{
						huaban.lineWidth = 32
					}
				}
			})
			
			// 监听鼠标按下事件
			canvas.onmousedown = function(e){
				huaban.isDraw = true;
				if(huaban.type == 'rect'){
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					huaban.beginX = x;
					huaban.beginY = y;
				}	
				if(huaban.type == 'huabi'){
					var x = e.pageX - canvas.offsetLeft;
					var y = e.pageY - canvas.offsetTop;
					huaban.beginX = x;
					huaban.beginY = y;
					c.beginPath()
					c.moveTo(x,y)
				}
			}
			// 监听鼠标抬起事件
			canvas.onmouseup = function(){
				huaban.imageData = c.getImageData(0,0,canvas.offsetWidth,canvas.offsetHeight)
				huaban.isDraw = false;
				if(huaban.type == 'huabi'){
					c.closePath()
				}
			}
			// 监听鼠标移动事件
			canvas.onmousemove = function(e){
				if(huaban.isDraw){
					var strFn = huaban.type + 'Fn';
					huaban[strFn](e);
				}
			}
		</script>
	</body>
</html>
